<template>
    <div class="card" @click="handleClick">
        <div class="card-left">
            <span class="card-title">
              <slot name="title"></slot>
            </span>
            <div class="card-body">
              <slot name="body"></slot>
            </div>
            <div class="card-footer">
              <slot name="footer"></slot>
            </div>
        </div>
        <div class="card-right" v-if="img!== '' || img.length > 0">
            <img :src="`${imgUrl}/${img}`" class="image" />
        </div>
    </div>
</template>

<script>
export default {
  name: 'ArticleCard',
  props: {
    imgUrl: String,
    img: String,
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }

}
</script>

<style lang="less" scoped>
.card {
  min-height: 180px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  // width: 100%;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    box-shadow:  0 2px 6px 0 rgb(0 0 0 / 10%);
  }
  &:hover {
    color: #006d87;
    text-decoration: underline;
  }
  .card-left {
    width: 75%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    flex: 5;
    position: relative;
    
    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .card-body {
      width: 100%;
      height: 60%;
      color: #201f1e;
    }
    .card-footer {
      position: absolute;
      bottom: 10px;
      color: #57606f;
      width: 100%;
      .category-tag {
        position: absolute;
        right: 10px;
      }
      .el-icon:before {
        padding-right: 5px;
      }
    }
    
  }
  .card-right {
    width: 25%;
    flex: 2;
    display: flex;
    align-items: center;
    .image {
      width: 100%;
      // height: 100%;
    }
  }
}
</style>